<script setup lang="ts">
import { computed } from 'vue'
import { useRouter } from 'vue-router'
import { useUserStore } from '@/stores/user'
import { UserOutlined, LogoutOutlined } from '@ant-design/icons-vue'
import { Modal } from 'ant-design-vue'
import { createVNode } from 'vue'
import type { MenuProps } from 'ant-design-vue'

const router = useRouter()
const userStore = useUserStore()
const userInfo = computed(() => userStore.userInfo)

// 处理退出登录
const handleLogout = () => {
  Modal.confirm({
    title: '确认退出',
    content: '确定要退出登录吗？',
    icon: createVNode(LogoutOutlined, { style: { color: '#ff4d4f' } }),
    okText: '确认',
    cancelText: '取消',
    async onOk() {
      try {
        userStore.logout()
        await router.push('/login')
      } catch (error) {
        console.error('退出登录失败:', error)
      }
    }
  })
}

// 下拉菜单项
const dropdownItems: MenuProps['items'] = [
  {
    key: 'profile',
    icon: () => createVNode(UserOutlined),
    label: '个人信息',
    onClick: () => router.push('/profile')
  },
  {
    type: 'divider'
  },
  {
    key: 'logout',
    icon: () => createVNode(LogoutOutlined),
    label: '退出登录',
    danger: true,
    onClick: handleLogout
  }
]
</script>

<template>
  <a-dropdown 
    placement="bottomRight" 
    :trigger="['hover']"
  >
    <div class="user-dropdown">
      <a-avatar :size="32" :src="userInfo?.avatar">
        {{ userInfo?.realName?.charAt(0) }}
      </a-avatar>
      <div class="user-info">
        <span class="username">{{ userInfo?.realName }}</span>
        <span class="role">{{ userInfo?.roleName }}</span>
      </div>
    </div>
    <template #overlay>
      <a-menu :items="dropdownItems" />
    </template>
  </a-dropdown>
</template>

<style lang="less" scoped>
.user-dropdown {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  padding: 4px 8px;
  border-radius: 4px;
  transition: background-color 0.2s;

  &:hover {
    background: rgba(0, 0, 0, 0.025);
  }

  .user-info {
    display: flex;
    flex-direction: column;
    margin-left: 8px;

    .username {
      color: rgba(0, 0, 0, 0.85);
      font-size: 14px;
      line-height: 1.2;
    }

    .role {
      color: rgba(0, 0, 0, 0.45);
      font-size: 12px;
      line-height: 1.2;
    }
  }
}

// 响应式处理
@media screen and (max-width: 768px) {
  .user-dropdown {
    .user-info {
      display: none;
    }
  }
}
</style> 